<template>
	<view>
		<view class="warp">
			<view class="title margin-bottom-lg">
				<text>云产品</text>
			</view>
			<uni-section>
				<uni-grid :column="3" :show-border="false" :square="false" @change="change">
					<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image" :src="item.url" mode="aspectFill" />
							<text class="text">{{item.text}}</text>
							<view v-if="item.badge" class="grid-dot">
								<uni-badge :text="item.badge" :type="item.type" />
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HotApplication",
		data() {
			return {
				dynamicList: [],
				list: [{
						url: '/static/image/hotapplication/cpu2.svg',
						text: '中央处理器'

					},
					{
						url: '/static/image/hotapplication/gpu.svg',
						text: '图形处理器'
					},
					{
						url: '/static/image/hotapplication/mem.svg',
						text: '内存'
					},
					{
						url: '/static/image/hotapplication/disk2.svg',
						text: '磁盘'
					},
					{
						url: '/static/image/hotapplication/os.svg',
						text: '操作系统'
					},

					{
						url: '/static/image/hotapplication/store2.png',
						text: '数据库'
					},
					{
						url: '/static/image/hotapplication/nic.svg',
						text: '网卡'
					},
					{
						url: '/static/image/hotapplication/websave.png',
						text: '支持与服务'
					}
				]
			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.navigateTo({
					url: "/pages/details/common_info?select=" + index
				})

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.title text {
		margin-left: 10px;
		margin-top: 20px;
		display: block;
		font-size: 35rpx;
		font-weight: 700;
	}

	.image {
		width: 30px;
		height: 30px;
	}

	.text {
		font-size: 12px;
		margin-top: 5px;
		text-align: center;
	}

	// .example-body {
	// 	/* #ifndef APP-NVUE */
	// 	// display: block;
	// 	/* #endif */
	// }

	// .grid-dynamic-box {
	// 	margin-bottom: 15px;
	// }

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	// .grid-item-box-row {
	// 	flex: 1;
	// 	// position: relative;
	// 	/* #ifndef APP-NVUE */
	// 	display: flex;
	// 	/* #endif */
	// 	flex-direction: row;
	// 	align-items: center;
	// 	justify-content: center;
	// 	padding: 15px 0;
	// }

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	// .swiper {
	// 	height: 420px;
	// }

	// /* #ifdef H5 */
	// @media screen and (min-width: 768px) and (max-width: 1425px) {
	// 	.swiper {
	// 		height: 630px;
	// 	}
	// }

	// @media screen and (min-width: 1425px) {
	// 	.swiper {
	// 		height: 830px;
	// 	}
	// }

	/* #endif */
</style>